<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%String basePath = request.getContextPath(); %>
<script type="text/javascript" src="<%=request.getContextPath() %>/resource/js/jquery/jquery-1.8.2.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/resource/js/jquery/jquery.cookie.js"></script> 
<script type="text/javascript" src="<%=basePath %>/resource/js/ajax_constants.js"></script>
<script type="text/javascript" src="<%=basePath %>/resource/js/constants.js"></script>
<script type="text/javascript" src="<%=basePath %>/resource/js/honeycombtool.js"></script>
<style type="text/css">
.thePost{
	float: left; 
	width: 160px;
	height: 247px;
	margin-left: 9px; 
	border: 1px solid #EDEDED;
	-moz-box-shadow: 2px 2px 3px #BABABA; 
	-webkit-box-shadow: 2px 2px 3px #BABABA;
 	box-shadow: 2px 2px 3px #BABABA;
 	cursor: pointer;
}
.thePostImg{
	width: 160px;
	height: 145px;
	color: #6A6A6A;
	font-size: 12px;
}
.thePostImg img{
	max-width: 160px;
	_width: expression((document.documentElement.clientWidth || document.body.clientWidth)>160?"160px":"auto");
	max-height: 145px;
	_height: expression((document.documentElement.clientHeight || document.body.clientHeight)>145?"145px":"auto");
	overflow: hidden;
}
.thePostWords{
	width: 160px;
	height: 100px;
}
.number{
	float : left;
	width : 30px; 
	height: 30px;
	margin-left:3px;
	font-size: 15px;
	line-height: 30px;
	text-align: center;
	backgroud:#fefcfd;
	color:#666666;
	-moz-box-shadow:1px 1px 4px #BABABA; 
	-webkit-box-shadow:1px 1px 4px #BABABA;
 	box-shadow:1px 1px 4px #BABABA;
 	cursor: pointer;
 	font-weight: bold;
 	display: block;
 	margin-top: 15px;
}

</style>

<!--[if lt IE 9]>
<style type="text/css">
.thePost{
	float: left;
	width: 160px;
	height: 247px;
	margin-left: 7px;
	border-top: 1px solid #EEEEEE;
	border-left: 1px solid #EEEEEE; 
	border-bottom: 2px solid #DDDDDD;
	border-right: 2px solid #DDDDDD;
}

.number{
	float : left;
	width : 30px; 
	height: 30px;
	margin-left:3px;
	font-size: 15px;
	line-height: 30px;
	text-align: center;
	backgroud:#fefcfd;
	color:#666666;
 	cursor: pointer;
 	font-weight: bold;
 	display: block;
 	margin-top: 15px;
	border-top: 1px solid #EEEEEE;
	border-left: 1px solid #EEEEEE; 
	border-bottom: 1px solid #DDDDDD;
	border-right: 1px solid #DDDDDD;
}
</style>
<![endif]-->

<script>
$(document).ready(function(){
	getPosts(0);
	$("#writePost").click(function() {
		if (userHadLogin()) {
			window.open(WEBROOT+"/play/article/writePosts", "_blank");	
		} else {
			window.top.openChatLogin("请先登录");
		}
	});
});

function userHadLogin() {
	if ($.cookie("userHadLogin") && $.cookie("userHadLogin") === "true") {
		return true;
	}
	return false;
}

var dinePosts = [];
var onePageNum = 8;
var classfiyNumberBlock = 8;
var selectDBCNum = 1;
function getPosts(index){

	$.ajax({
		url: WEBROOT + "/play/article/getArticles",
		data: {
			'pageNum':index,
			'articleType':"DINE"
		},
		type: 'post',
		async: true,
		dataType: 'json',
		success: function(resultData){
			if(resultData.result == AjaxMsgConstants.SUCCESS){
					var listLength = resultData.articleList.length;
					for(var i = 0;i < listLength;i++){
						dinePosts.push(resultData.articleList[i]);
					}
					controlNumPage(index);
					createPostNode(index);
			} else{
					alert("系统忙碌中请稍后尝试！");
			}
		}
	});
}
function createPostNode(index){
	
	clearPostNode();
	var length = dinePosts.length;
	var oneLinePost  = 0;
	if(index * onePageNum < length){
		var postHtml =  '';
		for(var i = index * onePageNum; i < (index + 1) * onePageNum; i++){
			var dinePost = dinePosts[i];
			var beginTime = new Date();
			beginTime.setTime(dinePost.articleCreateDttm * 1000);
			if (CHECK.isEmpty(dinePost.artSummaryPicUrl)) {
				postHtml =  '<div class="thePost" onclick="showPost(\''+dinePost.articleId+'\')">'+
								'<div class="thePostWords" style="height: 80px;">'+
									'<div style="width: 160px;height: 32px;font-size: 12px; color: #6a6a6a; text-align:center;line-height: 32px;">'+dinePost.articleTitle+
									'</div>'+
									'<div class="thePostImg" style="padding: 0 7px; width: 150px;word-wrap:break-word;border-bottom:1px solid #BABABA; letter-spacing:2px;text-indent:24px;line-height:15px;">'+dinePost.articleSummaryText+'</div>'+
									'<div style="width: 150px;height: 25px;font-size: 12px;color: #6a6a6a; padding-left: 10px; line-height: 25px;">贴主:&nbsp;'+dinePost.author.authorName+
									'</div>'+
									'<div style="width: 150px;height: 20px;font-size: 12px;color: #6a6a6a; padding-left: 10px; line-height: 20px; text-align: right;">'+beginTime.format("yyyy年MM月dd日")+'</div>'+
								'</div>'+
							'</div>';
			} else {
				postHtml =  '<div class="thePost" onclick="showPost(\''+dinePost.articleId+'\')">'+
								'<div class="thePostImg">'+
									'<img src="'+dinePost.artSummaryPicUrl+'">'+
								'</div>'+
								'<div class="thePostWords">'+
									'<div style="width: 160px;height: 32px;font-size: 12px; color: #6a6a6a;text-align:center;line-height: 32px;border-bottom:1px solid #BABABA;">'+dinePost.articleTitle+
									'</div>'+
									'<div style="width: 150px;height: 25px;font-size: 12px;color: #6a6a6a;padding-left: 10px; line-height: 25px;">贴主:&nbsp;'+dinePost.author.authorName+
									'</div>'+
									'<div style="width: 150px;height: 25px;font-size: 12px;color: #6a6a6a;padding-left: 10px; line-height: 25px; text-align: right;">'+beginTime.format("yyyy年MM月dd日")+'</div>'+
								'</div>'+
							'</div>';
			}
			if (i > 0 && (i+1) % 4 == 0) {
				postHtml += '<div style="clear: both;"></div>';
			}				
			oneLinePost++;
			if(oneLinePost < 5){
				$("#showPostsTop").append(postHtml);
			}else{
				$("#showPostsBottom").append(postHtml);
			}
		}
		oneLinePost = 0;
	} else{
		//getPosts(index);
		$("#showPostsTop").append('现在还没有贴子,等你来<a href="#writePost">添加</a>');
	}	
}
function clearPostNode(){

	$("#showPostsTop").html("");
	$("#showPostsBottom").html("");
}
var oldAllPageNum = 1;
function controlNumPage(pageNumIndex){

	var length = dinePosts.length;
	var allPageNum = Math.ceil(length / onePageNum);
	
	for(var i = oldAllPageNum;i <= allPageNum;i++){
		var numHtml = '<div  class="number">'+i+'</div>';
		$(".numPage").append(numHtml);
	}
	oldAllPageNum = allPageNum + 1;
	var $num = $(".numPage .number");
		var i = 0;
		$num.eq(pageNumIndex).css("background","#A0C958");
			$num.each(function(index){
					if(index + 1> classfiyNumberBlock){
						$num.eq(index).css("display","none");
						}
					$(this).click(function(){
						if(i != index){
							$num.eq(index).css("background","#A0C958");
							$num.eq(i).css("background","#fefcfd");
							i = index;
							createPostNode(index);
							if(allPageNum > 7){
								decidePointNumber(index);
								}
						}
					});
				});
}
function displayNumPage(displayType,displayIndex){
	
	var $num = $(".numPage .number");
	var dinePostsLength =  dinePosts.length;
	var length = dinePostsLength - 1;
	var allPageNum = Math.ceil(dinePostsLength / onePageNum);
	var indexL = 0;
	var indexR = 0;
		if(displayType == "right"){
			
			if(length - displayIndex +1  >= classfiyNumberBlock){
				indexL = displayIndex;
				indexR = displayIndex + classfiyNumberBlock - 1;
				}
			if(length - displayIndex + 1< classfiyNumberBlock){
				indexL = length - classfiyNumberBlock + 1;
				indexR = length;
				}
			getPosts(selectDBCNum);
			selectDBCNum++;;
		}
		if(displayType == "left"){
			if(displayIndex + 1 >= classfiyNumberBlock){
				indexL = displayIndex - classfiyNumberBlock + 1;
				indexR = displayIndex;
				}
			if(displayIndex + 1 < classfiyNumberBlock){
				indexL = 0;
				indexR = classfiyNumberBlock - 1;
				}
			}
		$num.each(function(index){
				if((index >= indexL) && (index <= indexR)){
					$num.eq(index).css("display","block");
					}
				else{
					$num.eq(index).css("display","none");
					}
		});
		
}
function decidePointNumber(displayIndex){
	
	var $num = $(".numPage .number");
	var numBlock = [];
	$num.each(function(index){
			if($(this).css("display") == "block"){
				numBlock.push(index);
				}
		});
	for(var i = 0;i < numBlock.length;i++){
			if(displayIndex == numBlock[i]){
				if(i <= 1){
					displayNumPage("left",displayIndex);
				
				}
				if(i>=classfiyNumberBlock - 2){
					displayNumPage("right",displayIndex);
				}
			}
	}
}

function showPost(id) {
	
	if (!CHECK.isEmpty(id)) {
		var onceNode = $("#showPostsBottom");
		onceNode.append('<form id="showPostsForm" action="'+WEBROOT+'/play/article/showPosts" method="get" target="_blank" style="display: none;"><input type="hidden" name="a" value="'+id+'" /></form>');
		onceNode.find("#showPostsForm").submit();
		onceNode.find("#showPostsForm").remove();
	}
}
</script>
<style>
.imgBox{
	position: relative;
	width: 670px;
	height: 281px;
	z-index: 1;
	overflow: hidden;
	margin-left: 45px;
}
.imgUl{
	position: relative;
	width: 8999px;
	margin: 0 0 0 -488px;
	float: left;
	z-index: 1;
}
.imgUl li{
	display:inline;
	float:left;
	width:220px;
	height:250px;
	padding:0 2px;
	cursor: pointer;
}
</style>
<script>
function autoExecAnimate(direction) {
	var scroll = $(".imgBox>ul");
	if(direction == 'right'){
		scroll.animate({marginLeft:"-"+488+"px"},600,function(){
			//把第一个li丢最后面去
			scroll.css({marginLeft:"-"+265+"px"}).find("li:first").appendTo(scroll);
		});
	}
	if(direction == 'left'){
		scroll.animate({marginLeft:"-"+42+"px"},600,function(){
			//把最后li丢面第一个去
			scroll.css({marginLeft:"-"+266+"px"}).find("li:last").prependTo(scroll);
		});

	}
}
var setDrectionTime = null;
var setTime = null;
$(function(){
	setTime = setInterval("autoExecAnimate('right')", 2000);
	$("#left").click(function(){
		if(setDrectionTime != null){
			clearTimeout(setDrectionTime);
		}
		clearInterval(setTime);
		autoExecAnimate('left');
		setDrectionTime = setTimeout(function(){
			setTime = setInterval("autoExecAnimate('right')", 2000);
			}, 6600);
		
		});
	$("#right").click(function(){
		if(setDrectionTime != null){
			clearTimeout(setDrectionTime);
		}
		clearInterval(setTime);
		autoExecAnimate('right');
		setDrectionTime = setTimeout(function(){
			setTime = setInterval("autoExecAnimate('right')", 2000);
			}, 6600);
	});
	$(".imgBox").mouseover(function(){
		$("#left").css("display","block");
		$("#right").css("display","block");
		});
	$(".imgBox").mouseout(function(){
		$("#left").css("display","none");
		$("#right").css("display","none");
		});
});
$(function(){
	$.ajax({
		url: WEBROOT + "/play/dine/getSummarizes",
		type: 'post',
		dataType: 'json',
		success: function(resultData){
			
			if(resultData.result == AjaxMsgConstants.SUCCESS){
					var resultLength  = resultData.summarizes.length;
					
					var liImgHtml = '';
					for(var i = 0;i < resultLength;i++){
						liImgHtml = '<li>'+
									'<a href="" target="_blank">'+
									'<img style="width:221px;height: 250px;" src="'+resultData.summarizes[i].pictures+'" >'+
									'</a>'+
									'</li>';
						$("#bigSlideUl").append(liImgHtml);
						}
			} else{
					alert("系统忙碌中请稍后尝试！");
			}
		}
	});
});
</script>
<div style="border-left: 3px solid #a0c958;" >
	<div class="imgBox">
		<div id="left" style="position: absolute;width: 26px;px;height: 50px;float: left;z-index: 100;margin-left: 20px;margin-top: 100px;display: none;cursor: pointer;">
			<div style="width: 26px;height: 50px;overflow: hidden;"><img style="margin-left: -58px;" src="<%=basePath %>/resource/images/common/scroll/pre_next.png"></div>
		</div>
		<div id="right" style="position: absolute;width: 26px;px;height: 50px;float: left;z-index: 100;margin-left: 620px;margin-top: 100px;display: none;cursor: pointer;">
			<div style="float: left;width: 26px;height: 50px;overflow: hidden;"><img style="margin-left: -84px;" src="<%=basePath %>/resource/images/common/scroll/pre_next.png"></div>
		</div>
		<ul id="bigSlideUl" class="imgUl">
		
		</ul>
	</div>
	<div style="width: 686px;height: 30px; margin-left: 33px;margin-top: 30px; text-align: center;line-height: 20px; ">
		<div style="float: left; width: 110px;height: 20px; margin-left: 30px;font-size: 20px;"><font color="#a0c958">■</font>随便看看</div>
		<div style="float: left; width: 110px;height: 20px; margin-left: 30px;font-size: 20px;"><font color="#a0c958">■</font>活动相关</div><!--
		 <div style="float: left; width: 110px;height: 20px; margin-left: 30px;font-size: 20px;"><font color="#a0c958">■</font>好友相关</div> 
		--><div style="float: left; width: 110px;height: 20px; margin-left: 30px;font-size: 20px; cursor: pointer;" id="writePost">发帖子<font color="#f4803d">→</font></div>
		<div style="clear:both;"></div>
	</div>
	<div id="showPostsTop" style="width: 686px;height: 247px; margin-left: 30px;margin-top: 30px;">
	
	</div>
	<div id="showPostsBottom" style="width: 686px;height: 247px; margin-left: 30px;margin-top: 25px;">
		
	</div>
	
	<div class="numPage"  style="width: 234px; height: 40px; margin-left: 300px;">
		
	</div>
	

</div>
	